<template>
	<view class="root">
		<view
			v-for="(option, key) in options"
			:key="key"
			:style="{ padding: `30rpx 0 30rpx 40rpx`, borderBottom: `solid 1rpx #eee` }"
			class="fd-row jc-sb ai-center"
		>
			<text class="fs-28 color-1b1b1b">{{ option.title }}</text>

			<label class="f1 jc-end">
				<image
					class="width-94 height-94 br-circle js-end bgc-eee mr-40 as-end"
					v-if="key === 'avatar'"
					:src="userInfo[option.name]"
					mode="aspectFill"
				/>
				<input
					v-else
					:style="{ marginRight: option.placeholder ? 0 : `32rpx` }"
					class="input f1 text-right fs-28 color-333 pl-60"
					v-model="userInfo[option.name]"
					:type="option.type || 'text'"
					:disabled="!option.placeholder"
					:placeholder="option.placeholder"
				/>

				<uni-icons v-if="option.placeholder" type="arrowright" color="#999" class="mr-8" />
			</label>
		</view>
		<button
			:plain="true"
			:style="{ margin: `80rpx 30rpx 50rpx` }"
			hover-class="tap-hover"
			class="bgc-3ec483 border-none br-10 color-fff br-10 fs-32 lh-3"
			@click="saveProfile"
		>
			保存
		</button>
	</view>
</template>

<script lang="ts">
	import { Vue, Component } from "vue-property-decorator";
	import uniIcons from "@/components/uni-icons.vue";

	@Component({ components: { uniIcons } })
	export default class Setting extends Vue {
		// component property
		userInfo: AnyObject = {};

		options: AnyObject = {
			avatar: {
				title: "头像",
				name: "headimgurl",
			},
			nickname: {
				title: "昵称",
				name: "nickname",
				placeholder: "请输入昵称",
			},
			realName: {
				title: "真实姓名",
				name: "name",
			},
			phoneNumber: {
				title: "联系电话",
				name: "phone",
			},
			bindBankCardNumber: {
				title: "绑定银行卡号",
				name: "bank_card",
				placeholder: "请输入绑定银行卡号",
				type: "number",
			},
		};

		onLoad() {
			this.getUserInfo();
		}

		getUserInfo() {
			this.$request.get("/user/getinfo").then(({ data }) => (this.userInfo = data));
		}

		saveProfile() {
			this.$request
				.post(
					"/user/update",
					Object.fromEntries(
						Object.values(this.options)
							.filter((item) => item.placeholder)
							.map((item) => [item.name, this.userInfo[item.name]])
					)
				)
				.then(({ errmsg: title }) => {
					this.getUserInfo();
					uni.showToast({ title });
				});
		}
	}
</script>

<style lang="scss" scoped>
	// scss
</style>